<template>
	<view>
		<view class="step">
			<Dsteps :titles="titles" :isActive="3"></Dsteps>
		</view>
		<view class="form clearfix">
			<view class="form-fa">
				<view class="content">
					<view class="title">向{{ payInfo.store_name }}付款</view>
					<view class="money">
						<text>金额</text>
						<text>¥</text>
						<text>{{ payInfo.price }}</text>
					</view>
				</view>
			</view>
			
		</view>
		<view style="margin: 220rpx 0 0;">
			<!-- <Dbutton :btnTxt="btnTxt"></Dbutton> -->
			<button type="default" class="btn" style="background-color: #09bb07;color: #fff;" @click="pay(3)"><text class="iconfont iconweixinzhifu" style="padding-right: 10rpx;color: #fff;font-size: 34rpx;"></text>微信支付</button>
		</view>
		<view style="margin: 30rpx 0;">
			<button type="default" class="btn" style="background-color: #008edb;color: #fff;padding-bottom: 2rpx;" @click="pay(2)"><text class="iconfont iconzhifubao" style="padding-right: 10rpx;color: #fff;font-size: 40rpx;letter-spacing: -18rpx;"></text>支付宝</button>
		</view>
		<view style="margin: 30rpx 0;">
			<button type="default" class="btn" style="background-color: #fcd90d;" @click="payOffline(4)"><text class="iconfont iconyinhangka" style="padding-right: 10rpx;font-size: 36rpx;"></text>线下支付</button>
		</view>
		<view class="notice-con">
			<view style="margin-bottom: 6rpx;">注意事项：</view>
			<view style="margin-bottom: 10rpx;">①请选择任意一种支付方式进行付款，线下付款方式需要与您的销售顾问确定后再选择；</view>
			<view style="margin-bottom: 10rpx;">②因微信政策限制，支付宝支付需要您截图系统生成的二维码使用支付宝扫码打开截图进行支付；</view>
			<view>③支付扣款成功后，因网络原因若系统依旧提示未支付，请稍等片刻，或联系您的课程顾问进行确认</view>
		</view>
	</view>
</template>

<script>
	import Dsteps from '../../components/steps.vue'
	import Dbutton from '../../components/button.vue'
	import { payMoney } from '../../api/identificationApi.js'
	import { findInfoCustomer } from '../../api/serviceApi.js'
	import { getWxConfig } from '../../api/indexApi.js'
	// #ifdef H5
	import wx from '../jweixin/index.js'
	// #endif
	export default {
		data() {
			return {
				titles: [
					{
						id: 1,
						name: '机构签署'
					},
					{
						id: 2,
						name: '客户签署'
					},
					{
						id: 3,
						name: '支付费用'
					},
					{
						id: 4,
						name: '签约完成'
					},
				],
				btnTxt: '下一步',
				price: '',
				payInfo: {},
				option: {}
			}
		},
		components: {
			Dsteps,
			Dbutton
		},
		computed: {
			
		},
		onLoad(option) {
			console.log(option)
			this.option = option
			this._findInfoCustomer()
		},
		methods: {
			async _findInfoCustomer() {
				const params = {id: this.option.id - 0}
				const res = await findInfoCustomer(params)
				console.log(res)
				this.payInfo = res.data.data
			},
			async pay(index) {
				// index支付方式（2-支付宝 3-微信 4-线下支付（后台支付）默认3）
				if (index === 2) {
					uni.navigateTo({
						url: `./alipay?id=${this.option.id}`
					})
					return
				}
				const res = await payMoney({id: this.option.id - 0,msg_type: index})
				// console.log(res)
				// "pay_type": 1,（0-银联支付  1-原生支付）
				
				// 择微信银联支付
				if (index === 3 && res.data.data.pay_type === 0) {
					window.location.href = res.data.data.url
				}
				// 选择微信原生支付
				if (index === 3 && res.data.data.pay_type === 1) {
					this._getWxConfig(res.data.data)
				}
			},
			async _getWxConfig(data) {
				const res = await getWxConfig()
				// console.log(res)
				// console.log(1234567890)
				// console.log(data)
				// console.log(1234567890)
				wx.config({
				  debug: false,
				  appId: res.data.data.appId,
				  timestamp: res.data.data.timestamp,
				  nonceStr: res.data.data.nonceStr,
				  signature: res.data.data.signature,
				  jsApiList: ['chooseWXPay']
				})
				wx.ready(() => {
				  wx.chooseWXPay({
				    timestamp: data.result.timestamp,
				    nonceStr: data.result.nonceStr, 
				    package: data.result.package,
				    signType: data.result.signType,
				    paySign: data.result.paySign,
				    success: (res)=> {
				      // console.log(res)
					  setTimeout(() => {
						  uni.navigateTo({
						  	url: `./payDetail?id=${this.option.id}`
						  })
					  }, 2000)
				    },
					fail: (err) => {
					  console.log(err)
					}
				  })
				})
			},
			payOffline(index) {
				uni.showModal({
					title: '温馨提示',
					content: '是否确认支付',
					success: (res)=> {
						if (res.confirm) {
							console.log('用户点击确定')
							this._payMoney(index)
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
					
				})
			},
			async _payMoney(index) {
				const res = await payMoney({id: this.option.id - 0,msg_type: index})
				uni.navigateTo({
					url: `./payDetail?id=${this.option.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.step {
		height: 300rpx;
		background-color: #fedb0d;
	}
	/* 清除浮动 */
	.clearfix:before,.clearfix:after{content:"";display:table}
	.clearfix:after{clear:both;}
	.clearfix{zoom:1}
	.uni-input-placeholder {
		color: #999 !important;
		font-size: 30rpx;
	}
	.btn {
		width: 92%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #fedb0d;
		border-radius: 2rpx;
		font-family: SourceHanSansCN-Medium;
		font-size: 32rpx;
		// font-weight: 600;
		// color: #010101;
	}
	.form {
		position: relative;
		margin: 0 30rpx;
		.form-fa {
			box-sizing: border-box;
			width: 690rpx;
			height: 269rpx;
			background-color: #fff;
			box-shadow: 0 8rpx 68rpx 0 rgba(0, 0, 0, 0.1);
			border-radius: 2rpx;
			position: absolute;
			left: 0;
			top: -80rpx;
			padding: 0 20rpx;
			.content {
				text-align: center;
				padding: 59rpx 90rpx 49rpx 90rpx;
				
				.title {
					color: #979797;
					font-size: 24rpx;
					margin-bottom: 30rpx;
				}
				.money {
					text-align: left;
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #e6e6e6;
					text:nth-child(1) {
						font-size: 24rpx;
						color: #f6d40d;
						padding-left: 25rpx;
					}
					text:nth-child(2) {
						font-size: 30rpx;
						color: #000;
						padding: 0 10rpx 0 50rpx;
					}
					text:nth-child(3) {
						font-size: 60rpx;
						color: #000;
					}
				}
			}
		}
		
	}
	.notice-con {
		padding: 0 30rpx;
		font-family: PingFangSC-Medium;
		font-size: 26rpx;
		color: #979797;
		line-height: 40rpx;
		margin-bottom: 80rpx;
	}
</style>
